<template>
    <div id="add-edit-JobRequest">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
            @close="clean"
        >
            <div v-if="showOverlay" class="overlay">
                <transition name="fade">
                    <div class="hint-s">
                        <h4>提示</h4>
                        <div style="display: flex; align-items: center;padding: 20px 10px;">
                            <el-icon class="loading-icon" style="margin-right: 10px;"><Loading /></el-icon>
                            <p>数据加载中，请稍后...</p>
                        </div>
                    </div>
                </transition>
            </div>
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="140px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="申请部门" prop="l_OrgId">
                            <el-cascader 
                                v-model="ruleForm.l_OrgId"
                                :options="orgOption" 
                                :props="orgProps" 
                                @change="orgChange"
                                filterable
                                clearable 
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="作业票据类型" prop="v_JobTypeName">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择作业票据类型" 
                                v-model="ruleForm.v_JobTypeName" 
                                @change="typeChange"
                            >
                                <el-option
                                    v-for="item in typesOption"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="承包商">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择承包商" 
                                v-model="ruleForm.l_ProviderId" 
                            >
                                <el-option
                                    v-for="item in providerOption"
                                    :key="item.n_Id"
                                    :label="item.v_ProvideName"
                                    :value="item.n_Id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="作业人" prop="v_Worker">
                            <el-input v-model="ruleForm.v_Worker" placeholder="请输入作业人" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="isManager" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="作业负责人">
                            <el-input v-model="ruleForm.v_Manager" placeholder="请输入作业负责人" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="作业人证书编号" prop="v_WorkerCertificateNo">
                            <el-input v-model="ruleForm.v_WorkerCertificateNo" placeholder="请输入作业人证书编号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="项目" prop="l_ProjectId">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择项目" 
                                v-model="ruleForm.l_ProjectId" 
                            >
                                <el-option
                                    v-for="item in projectOption"
                                    :key="item.n_Id"
                                    :label="item.project_Name"
                                    :value="item.n_Id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="动工地点" prop="v_JobAddress">
                            <el-input v-model="ruleForm.v_JobAddress" placeholder="请输入动工地点" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="计划动工开始时间" prop="d_IntendedStartTime">
                            <el-date-picker
                                v-model="ruleForm.d_IntendedStartTime"
                                type="datetime"
                                popper-class="el-date-p"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="计划完工时间" prop="d_IntendedCompletionTime">
                            <el-date-picker
                                v-model="ruleForm.d_IntendedCompletionTime"
                                type="datetime"
                                popper-class="el-date-p"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="动工内容" prop="v_JobContent">
                            <el-input type="textarea" v-model="ruleForm.v_JobContent" placeholder="请输入动工内容" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="其他作业">
                            <el-select 
                                filterable
                                multiple
                                collapse-tags
                                class="m-2" 
                                placeholder="请选择作业类型" 
                                v-model="ruleForm.relaApplyNOs" 
                            >
                                <el-option
                                    v-for="item in jobOption"
                                    :key="item.id"
                                    :label="item.v_JobContent"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否需要气体分析">
                            <el-switch
                                v-model="ruleForm.isNeedAirAnalysis"
                                active-color="#07AAF9"
                                inactive-color="#FF5F33"
                                inline-prompt
                                active-text="是"
                                inactive-text="否"
                                @change="analyseChange"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="isAnalyse" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="气体取样分析人">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择分析人" 
                                v-model="ruleForm.l_AirAnalystsId" 
                            >
                                <el-option
                                    v-for="item in useOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="安全措施确认人" prop="l_SafetyPreMan">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择确认人" 
                                v-model="ruleForm.l_SafetyPreMan" 
                            >
                                <el-option
                                    v-for="item in useOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <template v-if="isDivider && ruleForm.n_JobType === 0">
                        <el-divider content-position="left">动火作业申请表</el-divider>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="动火作业级别">
                                <el-select 
                                    filterable
                                    class="m-2" 
                                    placeholder="请选择动火作业级别" 
                                    v-model="ruleForm.jobApplyFormFire.v_JobFireWorkLevelName" 
                                    @change="fireWorkLevelChange"
                                >
                                    <el-option
                                        v-for="item in fireWorkLevelOption"
                                        :key="item.id"
                                        :label="item.value"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="动火方式">
                                <el-select 
                                    filterable
                                    class="m-2" 
                                    placeholder="请选择动火方式" 
                                    v-model="ruleForm.jobApplyFormFire.v_FireType" 
                                    @change="fireWayChange"
                                >
                                    <el-option
                                        v-for="item in fireWayOption"
                                        :key="item.id"
                                        :label="item.value"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </template>
                    <template v-if="isDivider && ruleForm.n_JobType === 1">
                        <el-divider content-position="left">临时用电申请表</el-divider>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="电源接入点">
                                <el-input v-model="ruleForm.jobApplyFormEle.v_AccessPoint" placeholder="请输入电源接入点" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="工作电压(V)">
                                <el-input type="number" v-model="ruleForm.jobApplyFormEle.n_Voltage" placeholder="请输入工作电压(单位V)" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="用电设备功率">
                                <el-input v-model="ruleForm.jobApplyFormEle.v_EquipmentPower" placeholder="请输入用电设备功率" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="监护人">
                                <el-input v-model="ruleForm.jobApplyFormEle.v_Guardian" placeholder="请输入监护人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="用电人">
                                <el-input v-model="ruleForm.jobApplyFormEle.v_ElectricityCustomer" placeholder="请输入用电人" clearable />
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-divider content-position="left">文件上传</el-divider>
                    <div style="padding: 0 20px;width: 100%;">
                        <FileView
                            ref="fileRef"
                            isAccept=""
                            :fileInfo="fileInfo"
                            :componentKey="componentKey"
                        />
                    </div>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="cancelUseClick">取消</el-button>
                <el-button type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm(ruleFormRef)">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue';
import { FormInstance, FormRules, ElButton, ElCol, ElDialog, ElForm, ElRow , ElMessage } from 'element-plus';
import { 
    ProviderGetList, 
    SMSJOBApplyAdd , 
    SMSJOBApplyUpdate , 
    projectList ,
    SMSJOBApplyList,
} from '/@/api/centerControl/sms';
import { sysDictDataList , sysUserselectorV2 , sysOrgTree , sysFileInfoYitId , sysFileInfoMultipleUpload } from '/@/api/centerControl/pubilc';
import FileView from '../file-view.vue';
import { legalFun } from '/@/utils/exportToExcel';
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    l_OrgId: any, // 申请单位(部门)
    n_JobType: Number, // 作业票据类型
    v_JobTypeName: String, // 作业票据类型名称
    l_ProviderId: any, // 承包商id
    v_Worker: String, // 作业人
    v_Manager: String, // 作业负责人
    v_WorkerCertificateNo: String, // 作业人证书编号
    v_JobAddress: String, // 动工地点
    d_IntendedStartTime: String, // 计划动工开始时间
    d_IntendedCompletionTime: String, // 计划完工日期
    v_JobContent: String, // 动工内容
    l_ProjectId: any, // 项目id
    relaApplyNOs: String, // 关联的其他特殊作业及安全作业票据编号
    isNeedAirAnalysis: Boolean, // 是否需要气体分析
    l_AirAnalystsId: any, // 气体取样分析人
    l_SafetyPreMan: any, // 安全措施确认人
    l_FileId: any, // 文件id
    jobApplyFormEle?: any, // 临时用电申请表
    jobApplyFormFire?: any, // 动火作业申请表
}
export default defineComponent( {
    name: 'add-edit-JobRequest',
    components: {FileView},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const typesOption = ref();
        const providerOption = ref();
        const projectOption = ref();
        const orgOption = ref();
        const jobOption = ref();
        const useOption = ref();
        const isAnalyse = ref(false);
        const isManager = ref(false);
        const isDivider = ref(false);
        const fireWorkLevelOption = ref();
        const fireWayOption = ref();
        const fileInfo = ref();
        const fileRef = ref();
        const showOverlay = ref(true); // 设置蒙层

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** 作业类型改变事件 */
        const typeChange = (val: any) => {
            let matchedItem = typesOption.value.find((item: any) => item.value === val);
            isDivider.value = true;
            if(matchedItem.code === 'GetAngry'){
                state.ruleForm.n_JobType = 0;
                isManager.value = true;
            }
            if(matchedItem.code === 'electro'){
                state.ruleForm.n_JobType = 1;
                isManager.value = false;
            }
        }

        /*** 动火作业级别改变事件 */
        const fireWorkLevelChange = (val: any) => {
            let matchedItem = fireWorkLevelOption.value.find((item: any) => item.value === val);
            if(matchedItem.code === 'Greate') state.ruleForm.jobApplyFormFire.n_JobFireWorkLevel = 0;
            if(matchedItem.code === 'LevelOne') state.ruleForm.jobApplyFormFire.n_JobFireWorkLevel = 1; 
            if(matchedItem.code === 'LevelTwo') state.ruleForm.jobApplyFormFire.n_JobFireWorkLevel = 2; 
        }

        /*** 动火方式改变事件 */
        const fireWayChange = (val: any) => {}

        /*** 获取数据字典 */
        const getDictFun = async() => {
            let ros: any = await sysDictDataList({ TypeCode: 'FireWay' }); // 动火作业方式
            let ras: any = await sysDictDataList({ TypeCode: 'FireWorkLevel' }); // 动火作业级别
            let res: any = await sysDictDataList({ TypeCode: 'JobType' }); // 作业票据类型
            let rcs: any = await ProviderGetList({});
            let rbs: any = await projectList({});
            let rds: any = await SMSJOBApplyList({});
            let rfs: any = await sysUserselectorV2({}); // 用户
            let rjs: any = await sysOrgTree({});
            if(ras.success) fireWorkLevelOption.value = ras.data;
            if(ros.success) fireWayOption.value = ros.data;
            if(res.success) typesOption.value = res.data;
            if(rcs.success) providerOption.value = rcs.data;
            if(rbs.success) projectOption.value = rbs.data;
            if(rds.success) jobOption.value = rds.data;
            if(rfs.success) useOption.value = rfs.data;
            if(rjs.success) orgOption.value = rjs.data;
            showOverlay.value = false;
        }

        /** 获取雪花id */
        const getXhFun = async() => {
            let res: any;
            res = await sysFileInfoYitId({});
            if(res.success) {
                fileInfo.value = JSON.stringify({sourceId: res.data});
                state.ruleForm.l_FileId = res.data;
            }
        }

        /*** 选择部门改变事件 */
        const orgChange = (val: any) => {
            if(val){
                let len = val.length;
                state.ruleForm.l_OrgId = val[len - 1];
            }
        }
        /*** 是否需要气体分析人改变事件 */
        const analyseChange = (val: any) => {
            isAnalyse.value = val;
        }

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // 申请单位（部门）
            l_OrgId: [
                { required: true, message: '请选择申请部门', trigger: 'change' }
            ],
            // 作业类型
            v_JobTypeName: [
				{ required: true, message: '请选择作业类型', trigger: 'change' },
			],
            // 承包商id
            l_ProviderId: [
				{ required: true, message: '请选择承包商', trigger: 'change' },
			],
            // 作业人
            v_Worker: [
                { required: true, message: '请输入作业人 ', trigger: 'blur' },
            ],
            // 作业人证书编号
            v_WorkerCertificateNo: [
                { required: true, message: '请输入作业人证书编号', trigger: 'blur' },
            ],
            // 动工地点
            v_JobAddress: [
				{ required: true, message: '请输入动工地点', trigger: 'blur' },
			],
            // 计划动工开始时间
            d_IntendedStartTime: [
				{ required: true, message: '请选择计划动工开始日期', trigger: 'change' },
			],
            // 计划完工日期
            d_IntendedCompletionTime: [
				{ required: true, message: '请选择计划完工日期', trigger: 'change' },
			],
            // 动工内容
            v_JobContent: [
				{ required: true, message: '请输入动工内容', trigger: 'blur' },
			],
            // 项目id
            l_ProjectId: [
				{ required: true, message: '请选择项目', trigger: 'change' },
			],
            // 安全措施确认人
            l_SafetyPreMan: [
                { required: true, message: '请选择安全措施确认人', trigger: 'change' },
            ],
            // 电源接入点
            v_AccessPoint: [
                { required: true, message: '请输入电源接入点', trigger: 'blur' },
            ],
            // 用电设备功率
            v_EquipmentPower: [
                { required: true, message: '请输入用电设备功率', trigger: 'blur' },
            ],
            // 监护人
            v_Guardian: [
                { required: true, message: '请输入监护人', trigger: 'blur' },
            ],
            // 用电人
            v_ElectricityCustomer: [
                { required: true, message: '请输入用电人', trigger: 'blur' },
            ],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelUseClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelUseClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => {
                if(valid){
                    let isLegal = true;
                    isLegal = await legalFun(
                        state.ruleForm.d_IntendedStartTime, 
                        state.ruleForm.d_IntendedCompletionTime, 
                        '请选择计划动工开始日期',
                        '计划动工开始日期不能大于计划完工日期'
                    );
                    if(!isLegal) return;
                    
                    let param: any = state.ruleForm;
                    let paramArr: any = [];
                    if(param.n_JobType === 0){
                        let {jobApplyFormEle , ...setArr} = param;
                        paramArr = setArr;
                    }
                    if(param.n_JobType === 1){
                        let {jobApplyFormFire , ...setArr} = param;
                        paramArr = setArr;
                    }
                    // if(param.relaApplyNOs.length !== 0){
                    //     let {relaApplyNOs , ...setArr} = param;
                    //     setArr.relaApplyNOs = param.relaApplyNOs.join(',');
                    //     paramArr = setArr;
                    // }else{
                    //     paramArr = param;
                    // }
                    state.repeatDis = true;
                    try{
                        let res: any;
                        if(props.repairInfo !== ''){
                            res = await SMSJOBApplyUpdate(paramArr); 
                        }else{
                            res = await SMSJOBApplyAdd(paramArr); 
                        }
                        if(res.success){
                            if(fileRef.value.fileList.length !== 0){
                                fileFun();
                            }else{
                                state.repeatDis = false;
                                ctx.emit('controlUseClick');
                                ctx.emit('updateData');
                            }
                        }else{
                            state.repeatDis = false;
                            ctx.emit('controlUseClick');
                        }
                    }catch(error){ 
                        state.repeatDis = false; 
                        ctx.emit('controlUseClick');
                    }
                }else{
                    console.log('error submit!')
					return false
                }
            })
        }

        /*** 文件上传 */
        const fileFun = async() => {
            let setArr:any = [];
            fileRef.value.fileList.map((i: any) => {
                setArr.push(i.raw);
            });
            let param: any = {};
            param.files = setArr;
            param.sourceId = state.ruleForm.l_FileId;
            param.sourceType = 10;
            try{
                let rcs: any = await sysFileInfoMultipleUpload(param);
                if(rcs.success){
                    state.repeatDis = false;
                    ctx.emit('controlUseClick');
                    ctx.emit('updateData');
                }else{
                    state.repeatDis = false;
                    ctx.emit('controlUseClick');
                }
            }catch(error){ 
                state.repeatDis = false; 
                ctx.emit('controlUseClick');
            }
        }

        /*** clean 清空数据 */
        const clean = () => {
            ruleFormRef.value.resetFields()
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                state.repeatDis = false;
                isAnalyse.value = false;
                isManager.value = false;
                isDivider.value = false;
                getDictFun();
                if(props.repairInfo !== ''){
                    titleCon.value = '编辑';
                    state.ruleForm = JSON.parse(props.repairInfo);
                }else{
                    titleCon.value = '新增';
                    state.ruleForm = {
                        l_OrgId: '', // 申请单位（部门）
                        n_JobType: 0, // 作业票据类型
                        v_JobTypeName: '', // 作业票据类型名称
                        l_ProviderId: '', // 承包商id
                        v_Worker: '', // 作业人
                        v_Manager: '', // 作业负责人
                        v_WorkerCertificateNo: '', // 作业人证书编号
                        v_JobAddress: '', // 动工地点
                        d_IntendedStartTime: '', // 计划动工开始时间
                        d_IntendedCompletionTime: '', // 计划完工日期
                        v_JobContent: '', // 动工内容
                        l_ProjectId: '', // 项目id
                        relaApplyNOs: '', // 关联的其他特殊作业及安全作业票据编号
                        isNeedAirAnalysis: false, // 是否需要气体分析
                        l_AirAnalystsId: '', // 气体取样分析人
                        l_SafetyPreMan: '', // 安全措施确认人                
                        l_FileId: '', // 文件id
                        jobApplyFormEle: {
                            v_AccessPoint: '', // 电源接入点
                            n_Voltage: 0, // 工作电压（单位V）
                            v_EquipmentPower: '', // 用电设备功率
                            v_Guardian: '', // 监护人
                            v_ElectricityCustomer: '', // 用电人
                            l_JobApplyId: 0, // 作业申请id
                        }, // 临时用电申请表
                        jobApplyFormFire: {
                            n_JobFireWorkLevel: 0, // 动火作业级别
                            v_JobFireWorkLevelName: '', // 动火作业级别名称
                            v_FireType: '', // 动火方式
                            l_JobApplyId: 0, // 作业申请id
                        }, // 动火作业申请表
                    }
                    getXhFun();
                }
                showOverlay.value = true;
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            clean,
            ruleFormRef,
            titleCon,
            orgOption,
            orgChange,
            typeChange,
            jobOption,
            useOption,
            analyseChange,
            isAnalyse,
            isManager,
            isDivider,
            fireWorkLevelOption,
            fireWorkLevelChange,
            fireWayOption,
            fireWayChange,
            orgProps: { checkStrictly: true , label: 'title', value: 'id', children: 'children' },
            ...toRefs(state),
            isUseDialog,
            rules,
            typesOption,
            providerOption,
            projectOption,
            componentKey: 1,
            fileInfo,
            fileRef,
            showOverlay,
        }
    },
} )
</script>
<style scoped lang="scss">
.loading-icon {
    color: #F56C6C;
    font-weight: bold; 
    font-size: 18px;
    svg{
        animation: loading-spin 2.5s infinite linear;
    }
}
@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.hint-s{
  border-radius: 4px;
  position: fixed;
  width: 30%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  z-index: 9999999999;
  h4{
    padding: 10px 0 10px 10px;
    border-bottom: 0.1px solid #CFD3DC;
    color: #2B2B2C;
  }
  p{
    color: #F56C6C;
    font-weight: bold;
  }
}
.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 999999999;
}
:deep(.fade-enter-active), 
:deep(.fade-leave-active){
  transition: opacity 2s;
}
:deep(.fade-enter), 
:deep(.fade-leave-to){
  opacity: 0;
}
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
</style>